<template>

  <div class="dashboard-container">
    <div class="app-container">

      <el-card>
        <div class="addHouse">
          <div class="leftHouse">
            <el-button type="primary" @click="addFn">添加房产</el-button>
          </div>
          <div class="rightHouse">
            <el-select v-model="category" placeholder="全部分类">
              <!-- <el-option selected label="全部分类" /> -->
              <el-option selected :value="undefined" label="全部分类" />
              <el-option v-for="item in classify" :key="item.id" :value="item.id" :label="item.title" />
            </el-select>
            <el-select v-model="agent" placeholder="全部经纪">
              <!-- <el-option selected label="全部经纪" /> -->
              <el-option selected :value="undefined" label="全部经纪" />
              <el-option v-for="item in broker" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
            <el-input v-model="title_contains" placeholder="请输入关键字" />
            <el-button @click="filteHouse">筛选</el-button>
          </div>
        </div>
        <el-table
          type="flex"
          justify="space-around"
          border
          style="width: 100%"
          :data="houseList"
        >
          <el-table-column prop="image" label="封面">
            <template v-slot="{row}">
              <img :src="row.image" alt="我是封面" class="cover">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="tags" label="标签" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="category.title" label="分类" />
          <el-table-column prop="agent.name" label="经纪" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column prop="photos" label="图片">
            <template v-slot="{row}">
              <el-image v-for="(item,index) in row.photos" :key="index" :src="item" class="cover" style="width: 50px; height: 50px" />
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="{row}" class="btn">
              <el-row type="flex" justify="space-between">
                <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 25px;margin-top: 18px">
          <el-pagination
            layout="prev, pager, next"
            :total="houseTotal"
            :page-size="limit"
            :current-page="page"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- 弹窗组件 -->
      <addHouse :id="curid" ref="depDialog" :show-dialog.sync="showDialog" />
    </div>
  </div>
</template>

<script>
import { getHouseList, getHouseCount, delHouse, getClassify } from '@/api/house'
import { getAgentsList } from '@/api/agents.js'
import addHouse from './components/add-house.vue'
export default {
  components: { addHouse },
  data() {
    return {
      title_contains: '', // 搜索框
      limit: 5, // 获取的最大条数
      start: 0, // 开始获取的位置
      houseTotal: 0, // 总数量
      houseList: [], // 房产列表
      photos: '', // 图片(小)
      showDialog: false, // 弹窗组件默认不显示
      broker: '', // 经纪人
      classify: '', // 分类
      curid: '', // 编辑id
      category: '',
      agent: '',
      page: 1 // 当前页码
    }
  },
  async created() {
    this.getHouseLists() // 房产列表
    const res = await getAgentsList() // 经纪人
    this.broker = res
    const result = await getClassify() // 分类
    this.classify = result
  },
  methods: {
    // 封装房产列表的获取与总数量
    async getHouseLists() {
      // 获取房产列表
      const res = await getHouseList({
        _limit: this.limit,
        _start: this.start
      })
      console.log(res)
      this.houseList = res.map(item => {
        // 当它存在且大于三
        if (item.photos && item.photos.length > 3) {
          item.photos.length = 3
        }
        return {
          ...item
        }
      })
      // 获取总数量
      const result = await getHouseCount()
      this.houseTotal = result
    },
    // 点击页码时触发
    async currentChange(newPage) {
      // 获取当前页码
      this.page = newPage
      // 开始获取的位置 = (页码-1) * 获取的最大条数
      this.start = (newPage - 1) * this.limit
      // 刷新房产列表数据
      await this.getHouseLists()
    },
    // 删除房产
    delFn(id) {
      // console.log(id)
      this.$confirm('确定删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        // 调用接口实现删除
        await delHouse(id)
        // 刷新房产列表数据
        if (this.houseList.length === 1 && this.houseTotal > 0) {
          this.start = (this.page - 2) * this.limit
          console.log(this.start)
        }
        this.getHouseLists({ _start: this.start, _limit: this.limit })
        // 提示用户
        this.$message.success('删除成功！')
      }).catch(() => {
        // 提示用户
        this.$message.info('取消删除！')
      })
    },
    // 添加房产
    addFn() {
      // 弹窗显示
      this.showDialog = true
    },
    // 编辑房产
    async editFn(id) {
      // 添加加载效果
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // 弹窗显示
      this.showDialog = true
      // 拿到id
      this.curid = id
      // 调用获取指定房产函数
      this.$nextTick(() => {
        this.$refs.depDialog.getAssignHouse(id)
      })
      // 获取到数据之后关闭加载效果
      loading.close()
    },
    // 筛选房产
    async filteHouse() {
      console.log(123)
      const params = { title_contains: this.title_contains, category: this.category, agent: this.agent }
      this.houseList = await getHouseList(params)
      const result = await getHouseCount(params)
      console.log(result)
      this.houseTotal = result
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .addHouse{
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .rightHouse{
    display: flex;
    width: 800px;
   .el-input__inner{
     display: inline-block;
     width: 100%;
   }
   .el-button+.el-button{
     margin-left: 0;
   }
   .el-icon-arrow-down{
     padding-left: 15px;
   }
}
}
.cover {
  width: 100%;
}
</style>
